<template>
  <div class="game-detail-container">
    <el-page-header @back="goBack" :content="game.title" />

    <el-card class="detail-card">
      <!-- 基本信息区域 -->
      <div class="basic-info">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="cover-image">
              <el-image
                :src="game.coverImage"
                fit="cover"
                style="width: 100%; height: 300px; border-radius: 4px"
              >
                <template #error>
                  <div class="image-error">封面加载失败</div>
                </template>
              </el-image>
            </div>
          </el-col>

          <el-col :span="16">
            <div class="info-section">
              <h2 class="game-title">{{ game.title }}</h2>

              <div class="meta-info">
                <el-tag type="info">游戏ID: {{ game.gameInfo.gameId }}</el-tag>
                <el-tag :type="game.priceD > 0 ? 'danger' : 'success'">
                  {{
                    game.priceD > 0
                      ? `折扣价: ¥${game.priceD}`
                      : `售价: ¥${game.price}`
                  }}
                </el-tag>
                <el-tag
                  v-if="game.priceD > 0"
                  type="info"
                  style="text-decoration: line-through"
                >
                  原价: ¥{{ game.price }}
                </el-tag>
                <el-tag type="warning">发布者ID: {{ game.userId }}</el-tag>
              </div>

              <div class="release-date">
                <el-icon><calendar /></el-icon>
                <span>发布日期: {{ formatDate(game.releaseDate) }}</span>
              </div>

              <div class="description">
                <h3>游戏描述</h3>
                <div
                  v-html="game.description"
                  class="description-content"
                ></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-divider />

      <!-- 展示图片区域 -->
      <div class="display-images" v-if="game.gameInfo.displayImages.length > 0">
        <h3>展示图片</h3>
        <el-scrollbar>
          <div class="image-list">
            <el-image
              v-for="(img, index) in game.gameInfo.displayImages"
              :key="index"
              :src="img"
              fit="cover"
              class="display-image-item"
              :preview-src-list="game.gameInfo.displayImages"
              :initial-index="index"
              hide-on-click-modal
            >
              <template #error>
                <div class="image-error">图片加载失败</div>
              </template>
            </el-image>
          </div>
        </el-scrollbar>
      </div>

      <!-- 展示视频区域 -->
      <div class="display-videos" v-if="game.gameInfo.displayVideos.length > 0">
        <h3>展示视频</h3>
        <div class="video-list">
          <video
            v-for="(video, index) in game.gameInfo.displayVideos"
            :key="index"
            controls
            class="video-item"
          >
            <source :src="video" type="video/mp4" />
            您的浏览器不支持视频播放
          </video>
        </div>
      </div>

      <!-- 游戏详情内容 -->
      <div class="game-content">
        <h3>游戏详情</h3>
        <div
          v-if="game.gameInfo.gameText"
          v-html="sanitizeHtml(game.gameInfo.gameText)"
          class="game-text-content"
        ></div>
        <div v-else class="no-content">暂无游戏详情</div>
      </div>

      <!-- 系统需求 -->
      <div
        class="system-requirements"
        v-if="Object.keys(game.gameInfo.systemRequirements).length > 0"
      >
        <h3>系统需求</h3>
        <div
          class="requirements-section"
          v-if="game.gameInfo.systemRequirements.minimum"
        >
          <h4>最低配置</h4>
          <el-descriptions :column="2">
            <el-descriptions-item label="操作系统">
              {{ game.gameInfo.systemRequirements.minimum.os || "无" }}
            </el-descriptions-item>
            <el-descriptions-item label="处理器">
              {{ game.gameInfo.systemRequirements.minimum.processor || "无" }}
            </el-descriptions-item>
            <el-descriptions-item label="内存">
              {{ game.gameInfo.systemRequirements.minimum.memory || "无" }}
            </el-descriptions-item>
            <el-descriptions-item label="显卡">
              {{ game.gameInfo.systemRequirements.minimum.graphics || "无" }}
            </el-descriptions-item>
            <el-descriptions-item label="存储空间">
              {{ game.gameInfo.systemRequirements.minimum.storage || "无" }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 推荐配置 -->
        <div
          class="requirements-section"
          v-if="game.gameInfo.systemRequirements.recommended"
        >
          <h4>推荐配置</h4>
          <el-descriptions :column="2">
            <el-descriptions-item label="操作系统">
              {{ game.gameInfo.systemRequirements.recommended.os || "无" }}
            </el-descriptions-item>
            <el-descriptions-item label="处理器">
              {{
                game.gameInfo.systemRequirements.recommended.processor || "无"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="内存">
              {{ game.gameInfo.systemRequirements.recommended.memory || "无" }}
            </el-descriptions-item>
            <el-descriptions-item label="显卡">
              {{
                game.gameInfo.systemRequirements.recommended.graphics || "无"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="存储空间">
              {{ game.gameInfo.systemRequirements.recommended.storage || "无" }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" @click="handleEdit">编辑游戏</el-button>
        <el-button type="danger" @click="handleDelete">删除游戏</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { Calendar } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import router from "@/router";
import { getGameInfoApi } from "@/apis/game";
import { useRoute } from "vue-router";
import DOMPurify from "dompurify";

const id = useRoute().params.id;

// 按照原始嵌套结构组织的 game 对象
const game = ref({
  id: null,
  title: null,
  description: null,
  coverImage: null,
  price: 0,
  priceD: 0,
  releaseDate: null,
  userId: null,
  gameInfo: {
    gameId: null,
    displayImages: [],
    displayVideos: [],
    gameText: null,
    systemRequirements: {
      minimum: {
        os: null,
        processor: null,
        memory: null,
        graphics: null,
        storage: null,
      },
      recommended: {
        os: null,
        processor: null,
        memory: null,
        graphics: null,
        storage: null,
      },
    },
  },
  downloadLink: null,
});

async function getGameInfo() {
  try {
    const res: any = await getGameInfoApi(id);
    if (res.code === 0) {
      game.value = res.data;
    } else {
      ElMessage.error("获取游戏详情失败");
    }
  } catch (error) {
    ElMessage.error("请求失败");
  }
}

function sanitizeHtml(html: any) {
  return DOMPurify.sanitize(html);
}

// 返回上一页
const goBack = () => {
  router.go(-1);
};

// 格式化日期
const formatDate = (dateString: any) => {
  const date = new Date(dateString);
  return date.toLocaleString();
};

// 编辑游戏
const handleEdit = () => {
  router.push("/gamemanage/gameedit/" + id);
};

// 删除游戏
const handleDelete = () => {
  ElMessageBox.confirm("确定要删除这个游戏吗? 此操作不可撤销。", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功");
      router.push("/game/list");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

onMounted(() => {
  getGameInfo();
  // 这里可以调用API获取游戏详情数据
});
</script>

<style scoped>
/* 样式部分保持不变 */
.game-detail-container {
  padding-bottom: 20px;
}

.detail-card {
  margin-top: 1em;
}

.game-title {
  margin-top: 0;
  color: #333;
}

.meta-info {
  margin: 1em 0;
}

.meta-info .el-tag {
  margin-right: 1em;
}

.release-date {
  display: flex;
  align-items: center;
  margin: 1em 0;
  color: #666;
}

.release-date .el-icon {
  margin-right: 5px;
}

.description h3,
.display-images h3,
.display-videos h3,
.game-content h3 {
  margin: 20px 0 10px;
  color: #333;
}

.description-content,
.game-text-content {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.display-images .image-list {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.display-image-item {
  width: 200px;
  height: 120px;
  border-radius: 4px;
  cursor: pointer;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.video-item {
  width: 300px;
  border-radius: 4px;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}

.system-requirements {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.requirements-section {
  margin-bottom: 20px;
}

.requirements-section h4 {
  margin: 10px 0;
  color: #606266;
  font-size: 16px;
}

.el-descriptions {
  margin-top: 10px;
}
</style>
